<template>
            <!-- 展示区域 -->
          <div class="module-box height90 flex">
              <!-- 左边 -->
                <div class="leftBox flexcolumn" style="flex:0 1 30%;height:100%">
                    <!-- 第一行 -->
                    <div class="height3 chartbgimg mt-12 box-p">
                        <div class="title01">
                                本年吞吐量
                        </div>
                        <div class="compony_content">
                            <div id="throughput" class="p1" >
                                    <div class="w50">
                                        <p class="train-name size16">本年吞吐量</p>
                                        <div id="throughputnum">
                                            <p class="size03">完成率</p>
                                             <el-progress :percentage="50" color="#FAC858" />
                                             <div class="completedbox flex mt-16">
                                                 <div class="completedleft">

                                                 </div>
                                                 <div class="completedright ml-8">
                                                     <p class="size03">实际完成(吨)</p>
                                                     <p class="size03">{{totalData.throughput.actualnum}}</p>
                                                 </div>
                                             </div>
                                             <div class="completedbox flex mt-8">
                                                 <div class="completedleft">

                                                 </div>
                                                 <div class="completedright ml-8">
                                                     <p class="size03">计划完成(吨)</p>
                                                     <p class="size03">{{totalData.throughput.plannum}}</p>
                                                 </div>
                                             </div>
                                        </div>
                                    </div>
                                    <div class="w50">
                                        <p class="train-name size16 mb-16">各单位吞吐量占比</p>
                                        <div id="throughputratio"></div>
                                    </div>
                                </div>
                        </div>  
                    </div>
                     <!-- 第二行 -->
                    <div class="height3 chartbgimg mt-12 box-p">
                            <div class="title01 ">
                               本年各单位吞吐量占比
                            </div>
                            <div class="compony_content">
                                <div id="monthlyVolume"></div>
                            </div>
                    </div>
                     <!-- 第三行 -->
                    <div class="height3 chartbgimg mt-12 box-p">
                            <div class="flexbetween">
                                <div class="title01 ">
                                    本年各货种吞吐量占比
                                </div>
                                <div>
                                    <el-select v-model="defaultvalue.volumevalue" placeholder="Select" style="width: 100px">
                                        <el-option
                                            v-for="item in defaultvalue.monthList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                </div>
                            </div>
                            <div class="compony_content">
                                <div id="volume"></div>
                            </div>
                    </div>
                </div>
                <!-- 中间 -->
                <div class="leftBox flexcolumn" style="flex:0 1 40%;height:100%;padding:0px 16px">
                    <div class="centerbox"></div>
                    <div class="height_center chartbgimg02 box-p">
                        <div class="title01 ">
                                当前各单位作业船舶
                            </div>
                            <div class="compony_content shipInformation drillTable table">
                                <el-table
                                            ref="myTable"
                                            class="table-style"
                                            :data="totalData.shipData"
                                            :header-cell-style="{ background: 'transparent'}"     
                                            
                                            style="height: 100%;"
                                            :cell-class-name="tableAddClass"
                                            :row-class-name="tableRowClass"
                                        > 
                                            <el-table-column prop="name"   label="船名" min-width="8%" >
                                                <!-- <template #default="scope">
                                                    <span class="elispice">{{scope.row.name}}</span>
                                                </template> -->
                                                <template #default="scope">
                                                        <el-popover
                                                        placement="top-start"
                                                        trigger="hover"
                                                        :content="scope.row.name"
                                                        >
                                                        <template #reference>
                                                            <span class="elispice " >{{
                                                            scope.row.name}}</span>
                                                        </template>
                                                        </el-popover>
                                                    </template>
                                            </el-table-column>
                                            <el-table-column prop="parkingSpace"   label="停靠泊位" min-width="9%" />
                                            <el-table-column prop="type"   label="装/卸" min-width="8%" />
                                            <el-table-column prop="typeName"   label="货名" min-width="7%" />
                                            <el-table-column prop="num"   label="货量(吨)" min-width="9%" />
                                            <el-table-column prop="progress"   label="装卸进度（%）" min-width="14%" />
                                            <el-table-column prop="arriveTime"   label="到港时间" min-width="9%" />
                                            <el-table-column prop="leaveTime"   label="离港时间" min-width="9%" />
                                    </el-table>
                            </div>
                    </div>
                </div>
                <!-- 右边 -->
                <div  class="leftBox flexcolumn" style="flex:0 1 30%;height:100%">
                    <div class="height3 chartbgimg mt-12 box-p">
                             <div class="flexbetween">
                                <div class="title01 ">
                                    货主累计吞吐量排名
                                </div>
                                <div>
                                    <el-select v-model="defaultvalue.shipperCompany" placeholder="Select" style="width: 100px;margin-right:16px">
                                        <el-option
                                            v-for="item in defaultvalue.type"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                    <el-select v-model="defaultvalue.shippermonth" placeholder="Select" style="width: 100px">
                                        <el-option
                                            v-for="item in defaultvalue.monthList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                </div>
                            </div>
                            <div class="compony_content">
                                <div class="drillTable table">
                                         <el-table
                                            ref="table1"
                                            class="table-style"
                                            :data="totalData.shipperdata"
                                            :header-cell-style="{ background: 'transparent'}"     
                                            
                                            style="height: 100%;"
                                            @mouseover="clearScroll" 
	                                        @mouseleave="createScroll"
                                        > 
                                            <el-table-column prop="ranking"   label="排名" min-width="8%" >
                                                <template #default="scope">
                                                    <span class="px8" v-if="scope.row.ranking == 1|| scope.row.ranking == 2 || scope.row.ranking == 3" :class="[scope.row.ranking == 1?'size10':scope.row.ranking == 2? 'size11':'size12']">top{{scope.row.ranking}} </span>
                                                    <span v-else class="size13 px8">top{{scope.row.ranking}}</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="name"   label="货主" min-width="10%" />
                                            <el-table-column prop="num"   label="累计船舶作业次数" min-width="10%" />
                                            <el-table-column prop="weight"   label="累计吞吐量（吨）" min-width="10%" />
                                        </el-table>
                                        <!-- <div class="leftTop throwBox"></div>
                                        <div class="rightTop throwBox"></div>
                                        <div class="leftBottom throwBox"></div>
                                        <div class="rightBottom throwBox"></div> -->
                                    </div>
                            </div>
                    </div>
                    <div class="height3 chartbgimg mt-12 box-p">
                            <div class="flexbetween">
                                <div class="title01 ">
                                    车队累计运货量排名
                                </div>
                                <div>
                                    <el-select v-model="defaultvalue.fleetmonth" placeholder="Select" style="width: 100px">
                                        <el-option
                                            v-for="item in defaultvalue.monthList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                </div>
                            </div>
                            <div class="compony_content">
                                <div class="drillTable table">
                                         <el-table
                                            ref="table2"
                                            class="table-style"
                                            :data="totalData.fleetData"
                                            :header-cell-style="{ background: 'transparent'}"   
                                            style="height: 100%;"
                                            @mouseover="clearScroll" 
	                                        @mouseleave="createScroll"
                                        > 
                                            <el-table-column prop="ranking"   label="排名" min-width="8%" >
                                                <template #default="scope">
                                                    <span class="px8" v-if="scope.row.ranking == 1|| scope.row.ranking == 2 || scope.row.ranking == 3" :class="[scope.row.ranking == 1?'size10':scope.row.ranking == 2? 'size11':'size12']">top{{scope.row.ranking}} </span>
                                                    <span v-else class="size13 px8">top{{scope.row.ranking}}</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="name"   label="车队" min-width="10%" />
                                            <el-table-column prop="num"   label="注册车辆" min-width="8%" />
                                            <el-table-column prop="weight"   label="累计运货量（吨）" min-width="10%" />
                                        </el-table>
                                    </div>
                            </div>
                    </div>
                    <div class="height3 chartbgimg mt-12 box-p">
                           <div class="flexbetween">
                                <div class="title01 ">
                                    各单位用电量排名
                                </div>
                                <div>
                                     <el-select v-model="defaultvalue.electricitynum" placeholder="Select" style="width: 100px;margin-right:16px">
                                        <el-option
                                            v-for="item in defaultvalue.type"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                    <el-select v-model="defaultvalue.electricitymonth" placeholder="Select" style="width: 100px">
                                        <el-option
                                            v-for="item in defaultvalue.monthList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                </div>
                            </div>
                            <div class="compony_content">
                                <div class="drillTable table">
                                         <el-table
                                            ref="table3"
                                            class="table-style"
                                            :data="totalData.electricityData"
                                            :header-cell-style="{ background: 'transparent'}"   
                                            style="height: 100%;"
                                            @mouseover="clearScroll" 
	                                        @mouseleave="createScroll"
                                        > 
                                            <el-table-column prop="ranking"   label="排名" min-width="8%" >
                                                <template #default="scope">
                                                    <span class="px8" v-if="scope.row.ranking == 1|| scope.row.ranking == 2 || scope.row.ranking == 3" :class="[scope.row.ranking == 1?'size10':scope.row.ranking == 2? 'size11':'size12']">top{{scope.row.ranking}} </span>
                                                    <span v-else class="size13 px8">top{{scope.row.ranking}}</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="name"   label="设备名称" min-width="10%" />
                                            <el-table-column prop="electricitynum"   label="用电量（Kw·h）" min-width="8%" />
                                            <el-table-column prop="weight"   label="装/卸货量（吨）" min-width="10%" />
                                            <el-table-column prop="loadingunloading"   label="用电量/每吨" min-width="10%" />
                                        </el-table>
                                    </div>
                            </div>
                    </div>
                </div>
          </div>
</template>
<script setup>
import { reactive,onBeforeMount,getCurrentInstance,onMounted, nextTick,onUpdated} from "vue";
import { ElMessage, ElMessageBox,ElNotification } from "element-plus";
import router from '@/router'
// import {getBigScreen as getBigScreen,getTaskDetail as getTaskDetail} from '@/api/index.js'
import store from '@/store'
const { proxy } = getCurrentInstance();
import { ref, onUnmounted } from 'vue';
// import CustomIndicator from './CustomIndicator.vue';
let timer = null
let myTable = ref()
let timer1 = null
let table1 = ref()
let table2 = ref()
let table3 = ref()
const compony  = ref()
const multipleTable = ref()
const scrollContainer = ref(null);
let intervalId = null;
const scrollStep = 1; // 每次滚动的像素值
const scrollInterval = 20; // 滚动间隔的毫秒数
const timerId = ref(null)
let defaultvalue=reactive({
    monthList:[
        {
            label: '一月',
            value: "一月"
        },
        {
            label: '二月',
            value: "二月"
        },{
            label: '三月',
            value: "三月"
        },
        {
            label: '四月',
            value: "四月"
        },{
            label: '五月',
            value: "五月"
        },{
            label: '六月',
            value: "六月"
        },
        {
            label: '七月',
            value: "七月"
        },{
            label: '八月',
            value: "八月"
        },{
            label: '九月',
            value: "九月"
        },{
            label: '十月',
            value: "十月"
        },{
            label: '十一月',
            value: "十一月"
        },{
            label: '十二月',
            value: "十二月"
        }
    ],
    type:[
        {
            label:'LPG',
            value:'0'
        },
        {
            label:'油品',
            value:'1'
        },
        {
            label:'散杂货',
            value:'2'
        }
    ],
    volumevalue:'一月',
    shippermonth:'一月',
    shipperCompany:'0',
    fleetmonth:'一月',
    electricitynum:'0',
    electricitymonth:'一月'
})
let totalData = reactive({
    // 本年吞吐量
    throughput:{
        plannum:'325.3',  //计划
        actualnum:'4565.55', //实际
        // 占比
        proportion: [
            { value: 1048, name: 'LPG' },
            { value: 735, name: '油品' },
            { value: 580, name: '散杂货' }
        ]
    },
    //本年各单位吞吐量占比
    monthlyVolumeData:{
    "lpg": [
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
    ],
    "yp": [
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        500.569,
        0,
        0,
        0,
        0
    ],
    "szh": [
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
    ],
    "yaxis": [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月"
    ]
    },
    //本年各货种吞吐量占比
    volumeData:[
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' },
                    { value: 1048, name: 'Search Engine1' },
                    { value: 735, name: 'Direct1' },
                    { value: 580, name: 'Email1' },
                    { value: 484, name: 'Union Ads1' },
                    { value: 300, name: 'Video Ads1' }
                ],
    //本月船舶信息
    shipData:[
        {
            "name": "友牧",
            "parkingSpace": "8#",
            "type": "卸货",
            "typeName": "常温丁烷",
            "num": "500.569",
            progress:25,
            "arriveTime": "08-09",
            "leaveTime": "",
            "status": null
        }, {
            "name": "友牧",
            "parkingSpace": "8#",
            "type": "卸货",
            "typeName": "常温丁烷",
            "num": "500.569",
            progress:25,
            "arriveTime": "08-09",
            "leaveTime": "",
            "status": null
        }, {
            "name": "友牧",
            "parkingSpace": "8#",
            "type": "卸货",
            "typeName": "常温丁烷",
            "num": "500.569",
            progress:25,
            "arriveTime": "08-09",
            "leaveTime": "",
            "status": null
        }, {
            "name": "友牧",
            "parkingSpace": "8#",
            "type": "卸货",
            "typeName": "常温丁烷",
            "num": "500.569",
            progress:25,
            "arriveTime": "08-09",
            "leaveTime": "",
            "status": null
        }
        ],
    //货主累计吞吐量排名
    shipperdata:[
        {
            ranking:1,
            name:'绍兴市容纳测控技术有限公司',
            num:5,
            weight:523.3
        },
        {
            ranking:2,
            name:'绍兴市容纳测控技术有限公司',
            num:5,
            weight:523.3
        },{
            ranking:3,
            name:'绍兴市容纳测控技术有限公司',
            num:5,
            weight:523.3
        },{
            ranking:4,
            name:'绍兴市容纳测控技术有限公司',
            num:5,
            weight:523.3
        },{
            ranking:5,
            name:'绍兴市容纳测控技术有限公司',
            num:5,
            weight:523.3
        }
    ],
    //车队累计运货量排名
    fleetData:[
        {
             ranking:1,
            name:'绍兴市容纳测控技术有限公司',
            num:55,
            weight:555
        }
    ],
    //各单位用电量排名
    electricityData:[
        {
            ranking:1,
            name:'绍兴市容纳测控技术有限公司',
            electricitynum:55, //用电量
            weight:555, //装/卸货量（吨）
            loadingunloading:'44447',//用电量/每吨
        }
    ],

})
onBeforeMount(()=>{
    // getIndexDataFun()
})
onMounted(()=>{
    initUploadVolumePie()
    initMonthlyVolume()
    initvolume()
    // initenergyConsumption()
    nextTick(()=>{
        scroll(table1.value.$refs.bodyWrapper);//设置滚动
        scroll(myTable.value.$refs.bodyWrapper);//设置滚动
        scroll(table2.value.$refs.bodyWrapper);//设置滚动
        scroll(table3.value.$refs.bodyWrapper);//设置滚动
    })
})
// 实际吞吐量占比
const initUploadVolumePie = ()=>{
    if (proxy.$echarts.getInstanceByDom(document.getElementById("throughputratio"))) {
        proxy.$echarts.dispose(document.getElementById("throughputratio"));
    }
    let classificationBox =  proxy.$echarts.init(document.getElementById("throughputratio"), "purple-passion");
    const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{b} <br/>{c}吨 ({d}%)'
        },
        series: [
            {
            name: '年度培训学习演练统计',
            type: 'pie',
            // center: ['30%', '50%'], //饼图位置
            radius: '70%',
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },

            labelLine: {
                show: false
            },
            data: totalData.throughput.proportion
            }
        ]
        };
    classificationBox.setOption(option, true);
    window.addEventListener("resize", function () {
        classificationBox.resize();
    });
            
}

//每月各货种吞吐量
const initMonthlyVolume =()=>{
    if (proxy.$echarts.getInstanceByDom(document.getElementById("monthlyVolume"))) {
        proxy.$echarts.dispose(document.getElementById("monthlyVolume"));
    }
    let myChart =  proxy.$echarts.init(document.getElementById("monthlyVolume"));
    let  option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
                lable:{
                    color:'#999'
                },
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            right: '5%',
            textStyle: {
                color: '#ffffff'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: totalData.monthlyVolumeData.yaxis,
            axisPointer: {
                type: 'shadow'
            },
            axisLabel:{
                show: true,
                textStyle:{
                    color: '#ffffff',  //更改坐标轴文字颜色
                }
            },
            
            
        },
        yAxis: {
            type: 'value',
            name: '单位：吨',
            splitLine: {
                show: false,
                },
            axisLine: {
                lineStyle: {
                    color: '#ffffff' // 将颜色设为透明
                }
            },
            splitLine: {
                show: true,
                lineStyle:{
                    color: ['#315070'],
                    width: 1,
                    type: 'solid'
                }
            },
            axisLabel:{
                show: true,
                textStyle:{
                    color: '#ffffff',  //更改坐标轴文字颜色
                }
            }
        },
        series: [
            {
            name: 'LPG',
            type: 'bar',
            lineStyle:{
                        color:'#FFB929'
                    },
            stack: 'total',
            emphasis: {
                focus: 'series'
            },
            data:totalData.monthlyVolumeData.lpg
            },
            {
            name: '油品',
            type: 'bar',
            stack: 'total',
            emphasis: {
                focus: 'series'
            },
            data: totalData.monthlyVolumeData.yp
            },
            {
            name: '散杂货',
            type: 'bar',
            stack: 'total',
            emphasis: {
                focus: 'series'
            },
            data: totalData.monthlyVolumeData.szh
            },
        ]
        };
    myChart.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
       
}

//本年各泊位利用率
const  initvolume =()=>{
    if (proxy.$echarts.getInstanceByDom(document.getElementById("volume"))) {
        proxy.$echarts.dispose(document.getElementById("volume"));
    }
            // setTimeout(()=>{
    let myChart =  proxy.$echarts.init(document.getElementById("volume"));
    let   option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                        type: 'scroll',
                        right: '10%',
                        orient: 'vertical',
                        textStyle: {
                            color: '#ffffff'
                        }
                    },
            series: [
                {
                name: '本年各货种吞吐量占比',
                type: 'pie',
                radius: '80%',
                center: ['30%', '50%'], //饼图位置
                 labelLine: {
                            show: false
                        },
                label: {
                    show: false,
                },
                avoidLabelOverlap: false,
                data: totalData.volumeData
                }
            ],
            };
            myChart.setOption(option, true);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
}

//能耗

</script>
<script>
//scroll方法不用对外，所以放在<script>里了
const scroll = (tableBody) => {
  let isScroll = true;

  const dom1 = tableBody.getElementsByClassName("el-scrollbar__wrap")[0];

  //鼠标放上去，停止滚动；移开，继续滚动
  dom1.addEventListener("mouseover", () => {
    isScroll = false;
  });
  dom1.addEventListener("mouseout", () => {
    isScroll = true;
  });

  setInterval(() => {
    if (isScroll) {
      dom1.scrollTop += 1;
      if (dom1.clientHeight + dom1.scrollTop == dom1.scrollHeight) {
        dom1.scrollTop = 0;
      }
    }
  }, 100);
};
</script>
<style lang='less' scoped>
#my-three{
    .module-box{
        :deep(.el-input__inner){
            color: #ffffff;
        }
        :deep(.el-input__wrapper){
            background-color: rgba(0,240,255,0.20);
        }
    }
    
    :deep(.el-table--border .el-table__inner-wrapper::after, .el-table--border::after, .el-table--border::before, .el-table__inner-wrapper::before ){
    background-color:transparent !important;
}
.content{
    height: 100vh;
    width: 100%;
    background-image: url('@/assets/img02/bgimg.png');
    background-size:100% 100% ;
}
.titlebox{
    width: 95%;
    height: 70%;
    display: flex;
    align-content: center;
    justify-content: space-between;
}
.buttonbox{
    width: 30%;
}
.buttonboxleft {
    // position: absolute;
    // left: 5%;
    // top: 4%;
}
.buttonboxright{
    // position: absolute;
    // right: 5%;
    // top: 4%;
}
.flexbetween{
    display: flex;
    justify-content: space-between;
}
.colorBox{
    width: 16px;
    height: 16px;
}
.px8{
    padding: 0 8px;
}
.size10{
    background-color: rgba(238,102,102,0.32);
    color: #EE6666;
}
.size11{
    background-color: rgba(252,132,82,0.32);
    color: #FC8452;
}
.size12{
    background-color:  rgba(250,200,88,0.32);
    color: #FAC858;
}
.size13{
    background-color:   rgba(0,240,255,0.32);
    color: #00F0FF;
}
.size0{
    color: #00F0FF;
    font-size: 20px;
    padding: 4px 16px;
    background-image: url('@/assets/img02/bg04.png');
    background-size:100% 100% ;
}
.completedbox{
    width: 100%;
    height: 58px;
    display: flex;
    padding: 8px;
     background-image: url('@/assets/img02/bg09.png');
     background-size:100% 100% ;
     justify-content: space-between;
}
.completedleft{
    width: 42px;
    height: 42px;
    background-image: url('@/assets/img02/bg08.png');
    background-size:100% 100% ;
}
.completedright{
    width: calc(100% - 42px);
}

:deep(.el-progress .el-progress__text){
    color: #FFFFFF !important;
}
:deep(.el-table__border-left-patch){
    background-color: transparent !important;
}
:deep(.el-table--border .el-table__inner-wrapper::after){
    background-color: transparent !important;
}
.el-table{
    background-color: transparent!important;
    :deep(.el-table__inner-wrapper::before){
        background-color: transparent !important;
    }
}
.table /deep/ .el-table th {
    background-color: transparent!important;
    border-bottom: 2px solid #00f0ff;;
}
  
.table /deep/ .el-table thead tr {
    background-color: rgba(0,0,0,0.12) !important;
}
.table /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
   background-color: transparent;
   border-bottom: none;
}
.el-table::before {//去除底部白线
     left: 0;
     bottom: 0;
     width: 100%;
     height: 0px;
}
:deep(.el-table--border th.el-table__cell, .el-table__fixed-right-patch){
    border-bottom: transparent !important;
    background-color: transparent;
}
:deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf){
     border-bottom: transparent !important;
}
:deep(.el-table__header){
    border-bottom:2px solid #0FBFC3
}
.table th{
    border:none;
  }
.el-table--border, .el-table--group{
  border: none;
}
.table td,.table th.is-leaf {
  border:none;
}
.el-table--border, .el-table--group{
  border: none;
}
:deep(.el-table--border::after){
    background-color:transparent !important;
}

// 表格内背景颜色
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
//   background-color:#063570;  // 背景透明
  border: 0px;
  color: #FFFFFF;  // 修改字体颜色
  font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
  font-weight: Normal;
  background-color: transparent;
}
:deep(.el-table--fit){
  height:100% !important;
}
:deep(.el-table__body-wrapper) {
  overflow-y: auto;
}
.drillTable{
    height: 100%;
    position: relative;
}

}
.w100{
    width: 100%;
}
.h100{
    height: 100%;
}
.size16{
    font-size: calc(100vw*16/1920);
}
.numBox{
    width: 44%;
    height: 100%;
    background-image: url(@/assets/img01/bgimg02.png);
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.train-name{
            width: 70%;
            height: 15%;
            background-image: url('@/assets/img01/title04.png');
            background-size: 100% 100%;
            padding-left: 15%;
            display: flex;
            align-items: center;
            color: #FFFFFF;
            margin: 0 auto;
}
#upload_volume{
    width: 56%;
    height: 100%;
}
#volume{
    width: 100%;
    height: 100%;
}
#monthlyVolume{
    width: 100%;
    height: 100%;
}
#energyConsumption{
    width: 100%;
    height: 100%;
}
#throughput{
    width: 100%;
    height: 100%;
    display: flex;
}
#throughputnum{
    width: 100%;
    height: 85%;
}
#throughputratio{
    width: 100%;
    height:calc(85% - 16px);
}
.compony_content{
     height: calc(100% - 30px);
     overflow: hidden;
}
::-webkit-scrollbar{
    width: 0px;
    height: 0px;
}

::-webkit-scrollbar-thumb{
    background-color: #999999;
    border-radius: 5px;
}
.throwBox{
    width: calc(100vw *10/1920);
    height: calc(100vw *10/1920);
    position: absolute;
}
.mt-12{
    margin-top: 12px;
}
.mt-8{
    margin-top: 8px;
}
.height90{
    height: 92%;
}
.h30{
    height: 30%;
}
.chartbgimg{
    background-image: url(@/assets/img02/bg06.png);
    background-size: 100% 100%;
}
.chartbgimg02{
        background-image: url(@/assets/img02/bg25.png);
        background-size: 100% 100%;
}
.height3{
    width: 100%;
    height: calc(100% / 3);
}
.height_center{
    width: 100%;
    height: calc(25% - 12px)
}
.box-p{
    padding: 4px 16px;
}
.centerbox{
    width: 100%;
    height: calc(75% + 12px);

}
.title01{
    width: 40%;
    height: 30px;
    background-image: url(@/assets/img01/title01.png);
    background-size: 100% 100%;
    color: #ffffff;
    font-size: 18px;
    padding: 0 8px;
    line-height: 30px;
}
.size01{
    color: #FFFFFF;
    font-weight: 700;
    font-size: 14px;
}
.size02{
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
}
.size03{
    color: #FFFFFF;
    font-size: 12px;
}
.size04{
    // color: #FFFFFF;
    background: linear-gradient(180deg,#ffffff 0%, #ffffff 38%, #0fbfc3 86%);
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.size05{
    color: rgba(255,255,255,0.60);
    font-size: 12px;
    text-align: center;
}
.headeimg{
        width: 100%;
        height: 75%;
        // background-image: url('@/assets/img01/icon.png');
    }
.left_task{
    width: 30%;
    height: 90%;
    margin-left: 3%;
    background-image: url('@/assets/img01/icon.png');
    background-size: 100% 100%;
    .headerimg{
        width: 100%;
        height: 75%;
        overflow: hidden;
        // background-image: url('@/assets/img01/icon.png');
    }
    .person_info{
        width: 100%;
        height: 25%;
        .name{
            color: #ffffff;
            font-weight: 700;
            text-align: center;
        }
        .position{
            text-align: CENTER;
            color: rgba(255,255,255,0.80);
        }
    }
}
// .task_box{
    // :nth-child(n+2){
    //     margin-left: 4px;
    // }
// }
.task_item{
    width: 48%;
    // height: 100%;
    background-size:100% 100% ;
    // padding-left: 20%;
    float: left;
    display: flex;
}
.taskName{
    color: #ffffff;
    font-size: 12px;
    background: linear-gradient(90deg,rgba(15,191,195,0.10) 0%, rgba(15,191,195,0.40) 100%);
    line-height: 20px;
    width: 60%;
    
}
.taskNum{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    line-height: 16px;
    line-height: 24px;
    background: linear-gradient(90deg,rgba(15,191,195,0.10) 0%, rgba(15,191,195,0.40) 100%);
    .num{
        font-size: 16px;
        color: #0fbfc3;
    }
    .look{
        color: #0fbfc3;
        font-size: 12px;
        cursor: pointer;
    }
}
.task_left{
    width: 50px;
    height: 100%;
    background-size: 100% 100%;
}
.task_right{
    width: calc(100% - 50px);
    margin-left: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.task01{
    background-image:  url('@/assets/img01/xunjian.png');
}
.task02{
    background-image:  url('@/assets/img01/yinhuan.png');
}
.task03{
    background-image:  url('@/assets/img01/baoyang.png');
}
.task04{
    background-image:  url('@/assets/img01/teshu.png');
}
.task05{
    background-image:  url('@/assets/img01/weixiu.png');
}
.task06{
    background-image:  url('@/assets/img01/shebei.png');
}
.right_task{
    width: 60%;
    height: 100%;
}
 /deep/.bgfloor .cell {
    color: #FFFFFF!important;

  }
  /deep/.bgfloor  {
    background-color: transparent !important;

  }
  /deep/.bgdeep .cell{
    color: #FFFFFF !important;
    // background-color: rgba(0,0,0,0.12);
  }
  /deep/.bgdeep {
    background-color: rgba(0,0,0,0.12);
  }  
  /deep/ .hover-row .bgdeep{
      color: rgb(102,102,102);
  }
.back{
    // position: absolute;
    // left: 1%;
    // top: 4%;
    font-size: calc(100vw*14/1920);
    width: 4%;
    height: 70%;
}
.back-cion{
    width: calc(100vw *25/1920);
    height: calc(100vw *25/1920);
    display: inline-block;
    background-image: url('@/assets/img/icon05.png');
}
 

.color01{
    color: #FFFFFF;
}
:deep(.el-progress-circle){
    width: 6.125rem !important;
    height: 6.125rem !important;
}



.p1{
    padding: 1%;
}
.mt-8{
    margin-top: 8%;
}
.mt-24{
 margin-top: 24px;
}
.mr-1{
    margin-right: 1%;
}
.w50{
    width: 50%;
}
.flex{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.flexcolumn{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.drillnum{
    height: 10%;
    padding: 1% 2%;
    color: #EE4444;
    background: rgba(238,68,68,0.02);
}
.headerImg{
    background-image: url('@/assets/img02/bg05.png');
    background-size: 100% 100%;
    position: relative;
    display: flex;
    .dataBox{
        height: 50%;
        width: 30%;
        // background-color: aqua;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        right: 1%;
        top: 0;
        .temperature{
            display: flex;
            align-items: center;
        }
        .temperature-cion{
            width: 25px;
            height: 25px;
            display: inline-block;
             background-size: 100% 100%;
            color: #FFFFFF;
        }
        .temperature-cion01{
            background-image: url('@/assets/img01/icon06.png');
        }
        .temperature-cion02{
            background-image: url('@/assets/img01/icon07.png');
        }
        .temperature-cion03{
            background-image: url('@/assets/img01/icon08.png');
        }
        .temperature-cion04{
            background-image: url('@/assets/img01/icon09.png');
        }
        .temperature-num{
            color: #FFFFFF;
            font-size:  calc(100vw *14/1920);;
        }
    }
    .split{
        width: 1px;
        height: 10px;                                                                                                                                          
        margin: 0 1%;
        background-color: rgba(255,255,255,0.24);
        // margin: 1%;
    }

}
.module-box{
    width: 100%;
    background: linear-gradient(270deg, #1c4154 0%, rgba(28, 65, 84, 0.80) 26%, rgba(29, 73, 96, 0.00) 34%, rgba(28, 65, 84, 0.00) 66%, rgba(28, 65, 84, 0.80) 74%, rgba(28, 65, 84, 0.80) 100%);
    padding: 0 24px 24px;
    
}
// .leftBox{
//     // margin-left: 1%;
//     background-image: url('@/assets/img/bgImg01.png');
//     background-size: 100% 100%;
//     width: 100%;
//     padding: 1%;
// }


.imageBgm{
    display: inline-block;
    width:100%;
    height:100%;
    background-image: url('@/assets/img01/header01.png');
    background-size: 100% 100%;
    // border: 4px solid rgba(0,194,255,0.30);
}
.taskBox {
    width: 30%;
}
    .shipInformation{
        width: 100%;
        height: calc(100% - 46px) !important;
        padding: 0 16px;
        overflow: hidden;
        position: relative;
        // padding: 1%;
        margin-top:1%

    }
.bigDialog{
    :deep(.el-dialog){
        background-image: url(@/assets/img01/dialogimg01.png);
        background-size: 100% 100%;
        background-color: #000000;
        height: 500px;
    }
    :deep(.el-table__border-left-patch){
    background-color: transparent !important;
}
 /deep/.bgfloor .cell {
    color: #FFFFFF!important;

  }
  /deep/.bgfloor  {
    background-color: transparent !important;

  }
  /deep/.bgdeep .cell{
    color: #FFFFFF !important;
    // background-color: rgba(0,0,0,0.12);
  }
  /deep/.bgdeep {
      color: #FFFFFF !important;
    // background-color: rgba(0,0,0,0.12);
    background-color: rgba(0,0,0,0.12) !important;
  }  
  /deep/ .hover-row .bgdeep{
      color: #ffffff;
  }
  /* 表格行鼠标经过颜色 */
    // ::v-deep .el-table__body tr:hover > td {
    //     background-color: #0FBFC3 !important;
    //     opacity: .1 !important;
    //     color: #ffffff;
    // }
    .icon_color{
        color: #0FBFC3;
    }
    :deep(.el-dialog__title){
        margin: 0;
    }
    .iconBox{
        float: right;
    }
    // .my-header{
        // display: flex;
        // align-items: center;
        // justify-content: space-between;
    // }
    :deep(.el-dialog__title){
        background-image: url(@/assets/img01/title02.png);
        background-size: 100% 100%;
        width: 15%;
        height: 30px;
        text-align: center;
        color: #FFFFFF;
        font-size: 20px;
        margin: 0 auto;
    }
    :deep(.el-dialog__body){
        height: calc(100% - 60px);
    }
    :deep(.el-table tr){
        background-color: transparent;
    }
}
:deep(.el-carousel--horizontal){
    height: 100%;
}
:deep(.el-table tr){
        background-color: transparent;
    }
:deep(.el-table .cell){
    color: #ffffff !important;
}
.elispice {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  width: 100%;
}
.position01{
    height: 85px;
    width: 100%;
}
.height35{
    height: 35%;
}
.borderline{
    width: 1px;
    height: 48px;
    background: rgba(255, 255, 255, 0.40);
}
</style>
<style scoped>
 .table-style >>> .el-table__body tr:hover > td {
      background-color: rgba(0, 0, 0, 0.2)!important;
    }
</style>

 